<template>
  <n-layout class="h-screen m-h-screen bg-[#F7F7F7]">
    <n-layout-header class="h-16 shadow-[0_2px_16px_0px_rgba(0,0,0,0.1)] flex justify-center">
      <img alt="header-logo" class="img-btn" height="26" src="/images/backstage-images/center-images/header-logo.svg"
           width="173" @click="$router.push('/')">
    </n-layout-header>
    <n-layout-content class="w-[1400px] mt-6 mx-auto bg-transparent">
      <n-tabs v-model:value="$route.name" animated size="large" type="line" @update:value="switchTab">
        <template #suffix>
          <n-space class="w-[672px]" justify="space-between">
            <n-button type="tertiary">今天</n-button>
            <n-button type="tertiary">昨天</n-button>
            <n-button type="tertiary">近7天</n-button>
            <n-button type="tertiary">最近30天</n-button>
            <n-date-picker :update-value-on-close="true" class="w-60" format="yyyy/MM/dd" separator="-"
                           type="daterange"/>
          </n-space>
        </template>
        <n-tab-pane name="chart" tab="数据图表">
          <n-card :bordered="false" title="访问数据统计"></n-card>
          <n-card :bordered="false" class="mt-4" title="访问地区"></n-card>
          <div class="flex justify-between">
            <n-card :bordered="false" class="w-[692px] mt-4" title="访问浏览器占比"></n-card>
            <n-card :bordered="false" class="w-[692px] mt-4" title="操作设备占比"></n-card>
          </div>
          <n-card :bordered="false" class="mt-4" title="访问记录排行TOP 5"></n-card>
        </n-tab-pane>
        <n-tab-pane name="record" tab="访问记录">
          <n-card :bordered="false" title="访问记录"></n-card>
        </n-tab-pane>
        <n-tab-pane name="detection" tab="域名检测">
          <n-card :bordered="false"></n-card>
          <n-card :bordered="false" title="检测说明">
            <n-ul align-text>
              <n-li class="text-[#00000099] mt-0">1.所有检测功能均对接官方口，数据准确率达到99.9。</n-li>
              <n-li class="text-[#00000099]">2.域名检测为图标化分类预览，更有利于分享，了解域名链接全面信息。</n-li>
              <n-li class="text-[#00000099]">3..获取Token对接接口网址：
                <n-a href="https://www.urlzt.com" target="_blank" type="primary">www.urlzt.com</n-a>
              </n-li>
            </n-ul>
          </n-card>
        </n-tab-pane>
      </n-tabs>
    </n-layout-content>
  </n-layout>
</template>

<script setup>
import {useRouter} from 'vue-router'

const router = useRouter()

const switchTab = name => {
  router.replace({name})
}
</script>

<style lang="less" scoped>
.n-layout {
  &:deep(.n-layout-content) {
    .n-tabs {
      .n-tabs-nav {
        background-color: #FFFFFF;
        padding-left: 24px;
        padding-right: 32px;

        .n-tabs-tab-wrapper {
          .n-tabs-tab-pad {
            width: 8px;
          }

          .n-tabs-tab {
            width: 120px;
            justify-content: center;
          }
        }

        .n-tabs-nav__suffix {
          .n-space {
            .n-date-picker {
              .n-input {
                .n-input-wrapper {
                  .n-input__input {
                    input {
                      color: #96A0B1;
                    }
                  }

                  .n-input__suffix {
                    .n-base-icon {
                      color: #96A0B1;
                    }
                  }
                }

                .n-input__separator {
                  color: #96A0B1;
                }
              }
            }
          }
        }
      }
    }

    .n-card {
      .n-card-header,
      .n-card__content {
        padding-left: 48px;
        padding-right: 48px;
      }
    }
  }
}
</style>
